
<template>
  <div class="wrapper">
    <!-- 搜索栏 -->
    <div class="title">
      <p style="font-size: 1.2em; line-height: 100%; margin: 0; text-align: center;">房卡一览</p>
      <br>
      <el-form :inline="true" :model="searchName" class="form" style="margin: -14px 0px 0px 0px;">
        <el-form-item label="房卡名称">
          <el-input v-model="searchName.name" placeholder="请输入房卡名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 折叠面板 -->
    <el-collapse v-model:activeNames="activeNames" accordion class="eco">
      <!-- 循环生成折叠项（每个地图对应一个折叠项） -->
      <el-collapse-item
        v-for="(mapName, index) in mapList"
        :key="index"
        :name="mapName"
      >
        <!-- 折叠项标题 -->
        <template #title>
          <span>{{ mapName }} ({{ roomCardMap[mapName]?.length || 0 }}条数据)</span>
        </template>

        <!-- 折叠内容：表格 -->
        <el-table
          :data="roomCardMap[mapName] || []"
          style="width: 100%; margin-top: 10px;"
        >
          <el-table-column fixed prop="cardImage" label="房卡图片" width="100">
            <template #default="scope">
              <img :src="scope.row.cardImage" width="50" v-if="scope.row.cardImage" />
              <span v-else>无图片</span>
            </template>
          </el-table-column>

          <el-table-column prop="mapName" label="所属地图" width="85" />
          <el-table-column prop="roomName" label="钥匙卡名称" width="120" />
          <el-table-column prop="usageLocation" label="使用地点" width="120" />
          <el-table-column prop="keyCardValue" label="价格" width="90" />
          <el-table-column prop="singleDoorOpenCost" label="单次使用价格" width="120" />

          <el-table-column prop="roomContainers" label="房间包含物资" width="auto">
            <template #default="scope">
              <el-table :data="scope.row.roomContainers" style="width: 100%;">
                <el-table-column prop="containerImage" label="物资图片" width="80">
                  <template #default="contScope">
                    <img :src="contScope.row.containerImage" width="30" v-if="contScope.row.containerImage" />
                    <span v-else>无图片</span>
                  </template>
                </el-table-column>
                <el-table-column prop="containerInfo" label="物资信息" width="auto" />
              </el-table>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { RoomCardModel, RoomCardModelResult } from "@/api/model/model";
import { queryRoomCardPageApi } from "@/api/roomCard";

// 定义地图列表（与后端返回的 key 保持一致）
const mapList = ref<string[]>(["航天基地", "巴克什", "零号大坝", "长弓溪谷"]);

// 定义折叠面板激活状态（默认展开所有项，可改为 [] 折叠所有）
const activeNames = ref<string[]>(mapList.value);

// 使用响应式对象存储所有地图数据（键为地图名称，值为房间列表）
const roomCardMap = ref<RoomCardModelResult>({});

type SearchEmpModel = {
  name: string;
};

const searchName = ref<SearchEmpModel>({ name: "" });

const search = async () => {
  const result = await queryRoomCardPageApi();
  if (result.code === 200) {
    // 直接赋值整个 data 对象（键值对结构）
    roomCardMap.value = result.data;
  }
};

onMounted(() => {
  search();
});
</script>

<style scoped>
    body{
        background-color: #bfa;
    }
.el-table {
  font-size: 12px;
}

</style>